<!--
 * @Description: 权限演示
 * @Date: 2023-02-21 13:09:19
 * @LastEditors: YeKe
 * @LastEditTime: 2023-02-21 14:09:15
 * @FilePath: \vue3-vite-ts-admin\src\views\system\permission\index.vue
-->
<template>
  <div class="permission-wrap">
    <h2 class="title">权限演示</h2>
    <h3>当前用户：{{ store.roles }}</h3>
    <h3>拥有按钮权限：{{ store.permissions }}</h3>
    <el-row class="row-box" :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="item">
          <p class="label">
            按钮权限（指令） v-hasPermissions="['system:user:remove']"
          </p>
          <el-button type="primary"> ['system:user:remove'] </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/user";
const store = useUserStore();
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.permission-wrap {
  text-align: center;
  .row-box {
    margin-top: 15px;
  }
  .item {
    padding: 15px;
    box-shadow: 0 0 5px #ccc;
    .label {
      color: $theme-color;
      padding: 5px;
      margin-bottom: 10px;
    }
  }
}
</style>
